<!DOCTYPE html>
<html lang="en">

<head>
    <!-- https://v3.cn.vuejs.org -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <title>#(title)</title>
</head>

<body>
    <!-- 声明式渲染 -->
    <h3> 声明式渲染</h3>
    <div id="app">
        {{ message }}
    </div>

    <h3> 声明式渲染</h3>
    <div id="counter">
        Counter: {{ counter }}
    </div>

    <!-- 绑定元素的 attribute -->
    <h3>绑定元素的 attribute</h3>
    <div id="bind-attribute">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

    <!-- 处理用户输入 -->
    <h3>处理用户输入</h3>
    <div id="event-handling">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转 Message</button>
    </div>

    <!-- 双向绑定 -->
    <h3>双向绑定</h3>
    <div id="two-way-binding">
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>

    <!-- 条件 -->
    <h3>条件</h3>
    <div id="conditional-rendering">
        <span v-if="seen">现在你看到我了</span>
    </div>

    <!-- 循环 -->
    <h3>循环</h3>
    <div id="list-rendering">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>


    <!-- 组件化应用构建 -->
    <h3>组件化应用构建</h3>
    <div id="todo-list-app">
        <ol>
            <!--
                现在我们为每个 todo-item 提供 todo 对象
                todo 对象是变量，即其内容可以是动态的。
                我们也需要为每个组件提供一个“key”，稍后再
                作详细解释。
                -->
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

    <!-- axios 网络请求 -->
    <h3> axios 网络请求</h3>
    <!-- 获取列表 -->
    <div id="todo-axios">
        <button @click="handleClick()">获取 Todo 列表</button>
        <!-- 创建 -->
        <div id="todo-create-axios">
            <input v-model="message" />
            <button v-on:click="createTodo">创建 Todo</button>
        </div>
        <ul>
            <li v-for="data in datalist">
                <p> {{data.title}} </p>
                <button v-on:click="removeTodo(data)">删除</button>
            </li>
        </ul>
    </div>

    <!-- Todo 应用 -->
    <h3> <a href="/site/todos">Todo 应用</a> </h3>
    <!-- END -->
    <!-- 这里是脚本 -->
    <script src="static/js/app.js"></script>
</body>

</html>
